<template>
	<view class="dean_room">
		<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 48rpx);">
			<view class="info_room m-b-16">
				<view class="menuTitle">
					<text>常用指标</text>
				</view>
				<view class="menuRoom">
					<view class="menuItem" v-for="(item,index) in list" :key="index" @click="goTo(item.icon)">
						<view class="ico-shadow">
							<img style="width: 60rpx;height: 60rpx;" :src="require('@/static/svg/'+item.icon+'.svg')"
								alt="" />
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="info_room  m-b-16">
				<view class="menuTitle">
					<text>数据统计（数据同步频率20分一次）</text>
					<view class="select_info">
						今日
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<view class="card_room">
					<view class="card_item">
						<view class="card_title">
							<view class="card_icon">门</view>
							门诊人次
						</view>
						<view class="card_main">
							{{outPatientPeopleNum.count}} <text class="card_sub">人</text>
						</view>
						<view class="card_com"
							:class="[outPatientPeopleNum.yearOverYear && outPatientPeopleNum.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{outPatientPeopleNum.yearOverYear ? outPatientPeopleNum.yearOverYear.indexOf('-') > -1 ? '' : outPatientPeopleNum.yearOverYear == 0 ? '' : "+" : ''}}{{outPatientPeopleNum.yearOverYear}}{{outPatientPeopleNum.yearOverYear ? outPatientPeopleNum.yearOverYear.indexOf('-') > -1 ? '↓' : outPatientPeopleNum.yearOverYear == 0? '' : "↑" : ''}}
							
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{outPatientPeopleNum.sumCurrentYear}}
							<text class="card_sub">人</text>
						</view>
					</view>
					<view class="card_item">
						<view class="card_title">
							<view class="card_icon">门</view>
							门诊收入
						</view>
						<view class="card_main">
							{{medical_fund_from_mz.count}} <text class="card_sub">元</text>
						</view>
						<view class="card_com"
							:class="[medical_fund_from_mz.yearOverYear && medical_fund_from_mz.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{medical_fund_from_mz.yearOverYear ? medical_fund_from_mz.yearOverYear.indexOf('-') > -1 ? '' : medical_fund_from_mz.yearOverYear == 0 ? '' : "+" : ''}}{{medical_fund_from_mz.yearOverYear}}{{medical_fund_from_mz.yearOverYear ? medical_fund_from_mz.yearOverYear.indexOf('-') > -1 ? '↓' : medical_fund_from_mz.yearOverYear == 0? '' : "↑" : ''}}
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{medical_fund_from_mz.sumCurrentYear}}
							<text class="card_sub">元</text>
						</view>
					</view>
					<view class="card_item">
						<view class="card_title red">
							<view class="card_icon red">住</view>
							入院人次
						</view>
						<view class="card_main">
							{{beHospitalizedPeopleNum.count}} <text class="card_sub">人</text>
						</view>
						<view class="card_com"
							:class="[beHospitalizedPeopleNum.yearOverYear && beHospitalizedPeopleNum.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{beHospitalizedPeopleNum.yearOverYear ? beHospitalizedPeopleNum.yearOverYear.indexOf('-') > -1 ? '' : beHospitalizedPeopleNum.yearOverYear == 0 ? '' : "+" : ''}}{{beHospitalizedPeopleNum.yearOverYear}}{{beHospitalizedPeopleNum.yearOverYear ? beHospitalizedPeopleNum.yearOverYear.indexOf('-') > -1 ? '↓' : beHospitalizedPeopleNum.yearOverYear == 0? '' : "↑" : ''}}
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{beHospitalizedPeopleNum.sumCurrentYear}}
							<text class="card_sub">人</text>
						</view>
					</view>
					<view class="card_item">
						<view class="card_title red">
							<view class="card_icon red">住</view>
							住院收入
						</view>
						<view class="card_main">
							{{medical_fund_from_zy.count}} <text class="card_sub">元</text>
						</view>
						<view class="card_com"
							:class="[medical_fund_from_zy.yearOverYear && medical_fund_from_zy.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{medical_fund_from_zy.yearOverYear ? medical_fund_from_zy.yearOverYear.indexOf('-') > -1 ? '' : medical_fund_from_zy.yearOverYear == 0 ? '' : "+" : ''}}{{medical_fund_from_zy.yearOverYear}}{{medical_fund_from_zy.yearOverYear ? medical_fund_from_zy.yearOverYear.indexOf('-') > -1 ? '↓' : medical_fund_from_zy.yearOverYear == 0? '' : "↑" : ''}}
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{medical_fund_from_zy.sumCurrentYear}}
							<text class="card_sub">元</text>
						</view>
					</view>
					<view class="card_item">
						<view class="card_title red">
							<view class="card_icon red">住</view>
							在院人次
						</view>
						<view class="card_main">
							{{inHospitalPeopleNum.count}} <text class="card_sub">人</text>
						</view>
						<view class="card_com"
							:class="[inHospitalPeopleNum.yearOverYear && inHospitalPeopleNum.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{inHospitalPeopleNum.yearOverYear ? inHospitalPeopleNum.yearOverYear.indexOf('-') > -1 ? '' : inHospitalPeopleNum.yearOverYear == 0 ? '' : "+" : ''}}{{inHospitalPeopleNum.yearOverYear}}{{inHospitalPeopleNum.yearOverYear ? inHospitalPeopleNum.yearOverYear.indexOf('-') > -1 ? '↓' : inHospitalPeopleNum.yearOverYear == 0? '' : "↑" : ''}}
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{inHospitalPeopleNum.sumCurrentYear}}
							<text class="card_sub">人</text>
						</view>
					</view>
					<view class="card_item">
						<view class="card_title zi">
							<view class="card_icon zi">术</view>
							今日手术
						</view>
						<view class="card_main">
							{{surgical_02.count}} <text class="card_sub">台</text>
						</view>
						<view class="card_com" :class="[surgical_02.yearOverYear && surgical_02.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{surgical_02.yearOverYear ? surgical_02.yearOverYear.indexOf('-') > -1 ? '' : surgical_02.yearOverYear == 0 ? '' : "+" : ''}}{{surgical_02.yearOverYear}}{{surgical_02.yearOverYear ? surgical_02.yearOverYear.indexOf('-') > -1 ? '↓' : surgical_02.yearOverYear == 0? '' : "↑" : ''}}
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">三级手术</text>
							{{surgical_02.level3SSNum}}
							<text class="card_sub">台，</text>
							<text class="card_sub">四级手术</text>
							{{surgical_02.level4SSNum}}
							<text class="card_sub">台</text>
						</view>
					</view>

					<view class="card_item">
						<view class="card_title lu">
							<view class="card_icon lu">技</view>
							检查人次
						</view>
						<view class="card_main">
							{{examPeopleNum.count}} <text class="card_sub">人</text>
						</view>
						<view class="card_com" :class="[examPeopleNum.yearOverYear && examPeopleNum.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{examPeopleNum.yearOverYear ? examPeopleNum.yearOverYear.indexOf('-') > -1 ? '' : examPeopleNum.yearOverYear == 0 ? '' : "+" : ''}}{{examPeopleNum.yearOverYear}}{{examPeopleNum.yearOverYear ? examPeopleNum.yearOverYear.indexOf('-') > -1 ? '↓' : examPeopleNum.yearOverYear == 0? '' : "↑" : ''}}
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{examPeopleNum.sumCurrentYear}}
							<text class="card_sub">人</text>
						</view>
					</view>
					<view class="card_item">
						<view class="card_title lu">
							<view class="card_icon lu">技</view>
							检验标本数
						</view>
						<view class="card_main">
							{{testPeopleNum.count}} <text class="card_sub">项</text>
						</view>
						<view class="card_com" :class="[testPeopleNum.yearOverYear && testPeopleNum.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{testPeopleNum.yearOverYear ? testPeopleNum.yearOverYear.indexOf('-') > -1 ? '' : testPeopleNum.yearOverYear == 0 ? '' : "+" : ''}}{{testPeopleNum.yearOverYear}}{{testPeopleNum.yearOverYear ? testPeopleNum.yearOverYear.indexOf('-') > -1 ? '↓' : testPeopleNum.yearOverYear == 0? '' : "↑" : ''}}
							
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{testPeopleNum.sumCurrentYear}}
							<text class="card_sub">项</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info_room  m-b-16">
				<view class="menuTitle">
					<text>趋势图</text>
					<view class="flex" style="align-items: center;">
						<view class="select_info m-r-10">
							近7天
							<u-icon name="arrow-down"></u-icon>
						</view>
						<u-subsection style="width:125px;" :list="['住院','门诊']" mode="button" activeColor="#4E79ED"
							inactiveColor="#04203D" :current="curNow" @change="sectionChange"></u-subsection>
					</view>

				</view>
				<echarts v-if="curNow === 0" :option="option" style="height: 300px;" @click="echartsClick"></echarts>
				<echarts v-if="curNow === 1" :option="option1" style="height: 300px;" @click="echartsClick"></echarts>
			</view>
			<view class="info_room">
				<view class="menuTitle">
					<text>医院业务收入占比</text>
					<view class="select_info">
						近7天
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<echarts :option="pieOption" style="height: 300px;" @click="echartsClick"></echarts>
				<view style="margin-bottom:30rpx">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/cwsyl.svg')" alt="" />床位使用率

					</view>
					<view class="progress_room">
						<view class="progress_line">
							<u-line-progress :percentage="bedStat" activeColor="#4A71F1" :showText="false"
								height="10"></u-line-progress>
						</view>

						<view class="progress_text">{{bedStat}}<text class="progress_icon">%</text></view>
					</view>

				</view>
				<view>
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/yzb.svg')" alt="" />药占比

					</view>
					<view class="progress_room">
						<view class="progress_line"><u-line-progress :percentage="ypStat" activeColor="#00BFB8"
								:showText="false" height="10"></u-line-progress></view>
						<view class="progress_text">{{ypStat}}<text class="progress_icon">%</text></view>
					</view>

				</view>
			</view>
		</scroll-view>

		<!--  -->
		<u-action-sheet :actions="options" :show="show" :closeOnClickAction="true"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	import echarts from '@/components/echarts'
	import {
		getIndexData
	} from '@/api/deanInquiry'
	export default {
		components: {
			echarts
		},
		data() {
			return {
				list: [{
						name: '运营概况',
						icon: 'yxgk'
					},
					{
						name: '经济指标',
						icon: 'jjzb'
					},
					{
						name: '医务信息',
						icon: 'ywxx'
					},
					{
						name: '护理信息',
						icon: 'hlxx'
					},
					{
						name: '运营效率',
						icon: 'yyxl'
					},
				],
				options: [{
					name: '今日',
					id: '1'
				}],
				curNow: 0,
				show: false,
				bedStat: 0,
				hospitalBusinessIncomeOccupy: {},
				trendMapMZ: {},
				trendMapZY: {},
				ypStat: 0,
				beHospitalizedPeopleNum: {},
				examPeopleNum: {},
				inHospitalPeopleNum: {},
				medical_fund_from_mz: {},
				medical_fund_from_zy: {},
				outPatientPeopleNum: {},
				surgical_02: {},
				testPeopleNum: {},
				option: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['住院收入', '住院量']
					},
					grid: {
						left: 35,
						right:65
					},
					xAxis: [{
						type: 'category',
						name:'日',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},

						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					yAxis: [{
							type: 'value',
							name: '人次',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
							// interval: 50,
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},
								formatter: '{value}'
							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						},
						{
							type: 'value',
							name: '元',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},

							// interval: 5,
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},
								formatter: '{value}'
							},
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						}
					],
					series: [

						{
							name: '住院收入',
							type: 'bar',
							yAxisIndex: 1,
							tooltip: {
								valueFormatter: function(value) {
									return value ;//+ ' 万';
								}
							},
							//给柱状图整体设置颜色
							itemStyle: {
								normal: {
									color: '#F29C66'
								},
							},
							data: [

							]
						},
						{
							name: '住院量',
							type: 'line',
							smooth: true,
							yAxisIndex: 0,
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 人次';
								}
							},
							//给折线图整体设置颜色
							itemStyle: {
								normal: {
									color: '#4C83E0'
								},
							},
							data: []
						}
					]
				},
				option1: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
				
					legend: {
						data: ['门诊收入', '门诊量']
					},
					grid: {
						left: 35,
						right:65
					},
					xAxis: [{
						type: 'category',
						name:'日',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},
				
						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],
				
					yAxis: [{
							type: 'value',
							name: '人次',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
							// interval: 50,
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},
								formatter: '{value}'
							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						},
						{
							type: 'value',
							name: '元',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
				
							// interval: 5,
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},
								formatter: '{value}'
							},
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						}
					],
					series: [
				
						{
							name: '门诊收入',
							type: 'bar',
							yAxisIndex: 1,
							tooltip: {
								valueFormatter: function(value) {
									return value ;//+ ' 万';
								}
							},
							//给柱状图整体设置颜色
							itemStyle: {
								normal: {
									color: '#F29C66'
								},
							},
							data: [
				
							]
						},
						{
							name: '门诊量',
							type: 'line',
							smooth: true,
							yAxisIndex: 0,
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 人次';
								}
							},
							//给折线图整体设置颜色
							itemStyle: {
								normal: {
									color: '#4C83E0'
								},
							},
							data: []
						}
					]
				},
				pieOption: {

					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [{
								value: 0,
								name: '药品收入'
							},
							{
								value: 0,
								name: '医疗收入'
							},

						],
						label: {
							normal: {
								position: "inside",
								formatter: '{b}\n{d}%',

							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				}
			}
		},
		onLoad(options) {
			this.getData()
		},
		methods: {
			getData() {
				getIndexData({
					datePattern: 0
				}).then(res => {
					console.log(res, '-------res-------------')
					this.bedStat = res.data.bedStat?.total > 0 ? parseInt((res.data.bedStat.occupy / res.data
						.bedStat.total) * 100) : 0;
					this.hospitalBusinessIncomeOccupy = res.data.hospitalBusinessIncomeOccupy || {}
					this.pieOption.series[0].data = [{
							value: res.data.hospitalBusinessIncomeOccupy?.ypsr,
							name: '药品收入'
						},
						{
							value: res.data.hospitalBusinessIncomeOccupy?.ylsr,
							name: '医疗收入'
						},
					]
					this.trendMapMZ = res.data.trendMapMZ || {};
					this.trendMapZY = res.data.trendMapZY || {};
					this.option.xAxis[0].data = res.data.trendMapZY?.xAxis.map(item => item.slice(-2)) || [];
					this.option.series[0].data = res.data.trendMapZY?.barValue || [];
					this.option.series[1].data = res.data.trendMapZY?.trendValue || [];
					
					this.option1.xAxis[0].data = res.data.trendMapMZ?.xAxis.map(item => item.slice(-2)) || [];
					this.option1.series[0].data = res.data.trendMapMZ?.barValue || [];
					this.option1.series[1].data = res.data.trendMapMZ?.trendValue || [];

					this.ypStat = res.data.ypStat?.total > 0 ? parseInt((res.data.ypStat.occupy / res.data.ypStat
						.total) * 100) : 0;
					this.beHospitalizedPeopleNum = res.data.statCard?.beHospitalizedPeopleNum || {}
					this.examPeopleNum = res.data.statCard?.examPeopleNum || {}
					this.inHospitalPeopleNum = res.data.statCard?.inHospitalPeopleNum || {}
					this.medical_fund_from_mz = res.data.statCard?.medical_fund_from_mz || {}
					this.medical_fund_from_zy = res.data.statCard?.medical_fund_from_zy || {}
					this.outPatientPeopleNum = res.data.statCard?.outPatientPeopleNum || {}
					this.surgical_02 = res.data.statCard?.surgical_02 || {}
					this.testPeopleNum = res.data.statCard?.testPeopleNum || {}
				})
			},
			goTo(path) {
				uni.navigateTo({
					url: `/pages/deanInquiry/${path}/index`
				})
			},
			sectionChange(index) {
				this.curNow = index;
				// if (index === 0) {
				// 	this.option.legend.data = ['住院收入', '住院量']
					
				// 	this.option.xAxis[0].data = this.trendMapZY?.xAxis.map(item => item.slice(-2)) || [];
				// 	this.option.series[0].data = this.trendMapZY?.barValue || [];
				// 	this.option.series[1].data = this.trendMapZY?.trendValue || [];
				// } else {
				// 	this.option.legend.data = ['门诊收入', '门诊量']
					
				// 	this.option.xAxis[0].data = this.trendMapMZ?.xAxis.map(item => item.slice(-2)) || [];
				// 	this.option.series[0].data = this.trendMapMZ?.barValue || [];
				// 	this.option.series[1].data = this.trendMapMZ?.trendValue || [];
				// }
			},
			selectClick(val) {
				console.log(val, 'val')
				this.show = false
			},
			echartsClick(params) {
				console.log('点击数据', params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dean_room {
		width: 100%;
		height: 100vh;
		background: rgba(241, 245, 248, 1); //linear-gradient(0deg, rgba(255, 255, 255, 0) 69.44%, rgba(241, 245, 248, 1) 100%);
		padding: 24rpx;

		.info_room {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 24rpx 28rpx;

			.menuTitle {
				font-size: 36rpx;
				font-weight: 800;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.select_info {
					border: 1px solid #ddd;
					border-radius: 5px;
					font-weight: 400;
					font-size: 14px;
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 8rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.menuRoom {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.menuItem {
				width: calc(100% / 4);
				text-align: center;
				height: 130rpx;
			}

			.card_room {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 12rpx;

				.card_item {
					width: calc(50% - 12rpx);
					height: 240rpx;
					border-radius: 10rpx;
					background: rgb(252, 252, 252);
					border: 1px solid rgb(221, 221, 221);

					.card_title {
						height: 74rpx;
						background: rgb(237, 242, 253);
						box-shadow: 0px 1rpx 0rpx rgb(221, 221, 221);
						text-align: center;
						line-height: 74rpx;
						font-size: 28rpx;
						font-weight: 800;
						position: relative;

						&.red {
							background: rgba(253, 240, 240);
						}

						&.zi {
							background: rgba(242, 240, 253, 1);
						}

						&.lu {
							background: rgba(229, 249, 248, 1);
						}

						.card_icon {
							position: absolute;
							width: 49rpx;
							height: 36rpx;
							border-radius: 0px 20rpx 20rpx 0px;
							background: #4E79ED;
							font-size: 24rpx;
							font-weight: 500;
							color: #fff;
							line-height: 36rpx;
							left: -16rpx;
							top: 12px;

							&::before {
								position: absolute;
								display: block;
								bottom: -5px;
								content: '';
								width: 14rpx;
								height: 10rpx;
								background-repeat: no-repeat;
								background-image: linear-gradient(215deg, #3053B3 50%, #fff 50%);
							}

							&.red {
								background: #ED6969;

								&::before {
									background-image: linear-gradient(215deg, #B83333 50%, #fff 50%);
								}
							}

							&.zi {
								background: #8168ED;

								&::before {
									background-image: linear-gradient(215deg, #472EB3 50%, #fff 50%);
								}
							}

							&.lu {
								background: #00BFB8;

								&::before {
									background-image: linear-gradient(215deg, #047572 50%, #fff 50%);
								}
							}
						}
					}

					.card_main {
						font-size: 42rpx;
						font-weight: 600;
						color: #04203D;
						text-align: center;
						padding: 16rpx 0 10rpx;
					}

					.card_sub {
						font-size: 24rpx;
						font-weight: 600;
						color: #7E8B9B;
					}

					.card_com {
						text-align: center;
						color: #ED6969;
						font-size: 24rpx;
						font-weight: 600;

						&.down {
							color: #00BFB8;
						}
					}

					.card_total {
						text-align: center;
						color: #04203D;
						font-size: 24rpx;
						font-weight: 600;

					}
				}
			}

			.progress_title {
				font-size: 28rpx;
				color: #04203D;
				font-weight: 600;
			}

			.progress_room {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.progress_line {
					width: calc(100% - 100rpx);
				}

				.progress_text {
					width: 100rpx;
					font-size: 36rpx;
					color: #04203D;
					text-align: right;

					.progress_icon {
						font-size: 24rpx;
						color: #7E8B9B
					}
				}
			}
		}
	}
</style>